import React, { useEffect, useState } from 'react'
import axios from '../../api/axios';
import { Button, SearchBar, Space, Toast, Card, Tag,NavBar } from 'antd-mobile'
import { IndexBar, List } from 'antd-mobile'
import useLoash from '../../hooks/useLoash';
import { useNavigate, Outlet } from 'react-router-dom'
function Index() {
     let navigate = useNavigate()
    const [city, setCity] = useState([])
    const [searchlist, setSearchlist] = useState([])
    const [cityhis, setCityhis] = useState(JSON.parse(localStorage.getItem('cityhis')) || [])

    const getcity = async () => {
        const res = await axios.get('/api/city')
        console.log(res);
        const { code, data } = res.data
        if (code == 200) {
            setCity(data.city)
        }
    }
    useEffect(() => {
        getcity()
    }, [])
    const handelsearch =useLoash(async (val) => {
        if (val == '') {
            setSearchlist([])
            return
        }
        const res = await axios.get('/api/city/search', { params: { wd: val } })
        console.log(res);
        const { data } = res.data
        setSearchlist(data)
        const newlist=[val,...cityhis]
        console.log(newlist);
        const ind=newlist.lastIndexOf(val)
        if(ind!==0){
            newlist.splice(ind,1)
        }
        setCityhis(newlist)
        localStorage.setItem('cityhis',JSON.stringify(newlist))
    },1000) 
    const handeldel=()=>{
         setCityhis([])
        localStorage.setItem('cityhis',JSON.stringify([]))
    }

    return (
        <div>
            <NavBar onBack={()=>navigate('/')}>
             <SearchBar placeholder='请输入内容' onChange={(val) => handelsearch(val)} />   
            </NavBar>
            
            <List>
                {searchlist.length > 0 && searchlist.map((item, index) => (
                    <List.Item key={index}>{item.name}</List.Item>
                ))}
            </List>

            <Card title='历史记录' extra={
                <Button onClick={()=>handeldel()} style={{color:'red'}}>清除记录</Button>
            }>
               {
                cityhis.map((it,ind)=>(
                    <Tag key={ind}>{it}</Tag>
                ))
               }
            </Card>

            <div style={{ height: window.innerHeight }}>
                <IndexBar>
                    {city.length > 0 && city.map((item, ind) => {
                        return (
                            <IndexBar.Panel
                                index={item.initial}
                                title={`${item.initial}`}
                                key={`${item.initial}`}
                            >
                                <List>
                                    {item.list.map((item, index) => (
                                        <List.Item key={index}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>

        </div>
    )
}

export default Index
